<!--  -->
<template>
  <div>
      <div class="shop-top"><img :src="shop.logo" alt=""><span>{{shop.name}}</span></div>
      <div class="shop-center">
          <div class="shop-left">
              <div class="sells"><span>{{shop.sells}}</span><span>{{shop.goodsCount}}</span></div>
              <div class="shop-baby"><span>总销量</span><span>全部宝贝</span></div>
          </div>
          <div class="shop-right">
              <table>
                  <tr v-for="(item, index) in shop.score" :key="index">
                      <td>{{item.name}}</td>
                      <td class="score" :class="{'score-better': item.isBetter}">{{item.score}}</td>
                      <td class="better" :class="{'better-more': item.isBetter}"><span>{{item.isBetter ? '高':'低'}}</span></td>
                  </tr>
              </table>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props:{
      shop:{
          type:Object,
          default() {
              return {}
          }
      }
  }
}
</script>

<style  scoped>
    .shop-top{
        height: 60px;
        margin: 10px 5px;
        color: #818181;
    }
    .shop-top img{
        width: 60px;
        vertical-align: middle;
        margin-right: 3px;
    }
    .shop-center{
        display: flex;
    }
    .shop-center div{
        flex: 1;
    }
    .shop-left{
        height: 40px;
        text-align: center;
        margin: 0 20px;
        color: #000;
        border-right: 1px solid #ccc;
        margin-top: 25px;
    }
    .sells{
        display: flex;
        margin-bottom: 5px;
    }
    .sells span{
        flex: 1;
    }
    .shop-baby{
        font-size: 13px;
        display: flex;
    }
    .shop-baby span{
        flex: 1;
    }
    .shop-right table td{
        padding: 5px 5px;
        font-size: 13px;
    }
    .score{
        color: #5ea732;
    }
    .score-better{
        color: #f13e3a;
    }
    .better span{
        background-color: #5ea732;
        color: #fff;
        text-align: center;
    }
    .better-more span {
        color: #f13e3a;
    }
</style>
